.phone-input__flag-icon {
	pointer-events: none;
	max-width: 24px;
	max-height: 18px;
	align-self: center;
	box-shadow: 0 0 1px var( --color-neutral-10 );
}

.phone-input__flag-selector-icon {
	color: var( --color-neutral-20 );
	margin-left: 3px;
	align-self: center;
}

.phone-input__flag-container {
	pointer-events: none;
	width: 100%;
	display: flex;
	justify-content: space-around;
	padding: 0 5px;
}

.phone-input__select-container {
	position: absolute;
	top: 0;
	width: 60px;
	cursor: pointer;

	&:hover .phone-input__flag-selector-icon {
		color: var( --color-neutral-light );
	}
}

.phone-input__select-inner-container {
	margin-top: 4px;
	border-right: 1px solid var( --color-neutral-10 );
	height: 32px;
	display: flex;
}

select.phone-input__country-select {
	position: absolute;
	top: 1px;
	left: 1px;
	width: 58px;
	height: 38px;
	border: 0;
	background-image: none;
	opacity: 0;

	&:focus {
		box-shadow: none;
	}
}

.phone-input__flag-spinner {
	z-index: 0;
	position: absolute;
	align-self: center;
	left: 10px;
	pointer-events: none;
	width: 24px;
}

.phone-input {
	position: relative;
	width: 100%;

	.phone-input__number-input {
		padding-left: 70px;
	}
}
